<template>
  <div class="cinemain_pag" v-if="hasDone">
    <div class="black">
      <img v-if="showFilmDetail" src="@/assets/goBack.png" alt="" class="goBack" @click="Back">
      <img v-if="!showFilmDetail" src="@/assets/cross.png" alt="" class="gocross" @click="toCross">
    </div>
    <div class="header-title">
      <span>{{ cinemaInfo.name }}</span>
    </div>
    <template v-if="showFilmDetail">
      <div class="tags" @click="hangdlerTags()">
        <div v-for="item in getServes()" class="ta">{{ item }}</div>
        <div class="more">></div>
      </div>
      <div class="address">
        <div class="addw">
          <img src="@/assets/address.png" alt="" />
          <span>{{ cinemaInfo.address }}</span>
        </div>
      </div>

      <div class="swiper-container">
        <ul>
          <img v-for="item in showFilm" :src="item.poster" alt="" @click="hangClick(item)" />
        </ul>
      </div>

      <div class="film-info" v-if="filmInfo.actors">
        <span>{{ filmInfo.name }}</span>
        <div class="catgo">
          {{ filmInfo.category }} {{ filmInfo.runtime }}分钟 |
          {{ getActors(filmInfo.actors) }}
        </div>
      </div>
      <div class="tabs-bar">
        <li v-for="item in filmdays" @click="hangleFilmdays(item.stamp)">{{ item.time }}</li>
      </div>
      <div class="main-item">
        <div class="schedule-item" v-for="item in scheduleList">
          <div class="left">
            <span>{{ parTime(item.showAt, "HH:mm") }}</span>
            <div class="little">{{ parTime(item.endAt, "HH:mm") }} 散场</div>
          </div>
          <div class="middle">
            <span>{{ item.filmLanguage }}</span>
            <div class="little">{{ item.hallName }}</div>
          </div>
          <div class="right" style="color: #ff5f16">
            <span>￥{{ item.salePrice / 100 }}</span>
            <span class="buy-ticket">购票</span>
          </div>
        </div>
      </div>
    </template>
    <template v-if="!showFilmDetail">
      <div class="service-info">
        <div v-for="item in cinemaInfo.services" class="info">
          <div class="service">{{ item.name }}</div>
          <span>{{ item.description }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { getCinemaInfo, getshowFilm, getscheduleList, parseTimestamp } from "@/api/mm";
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const cinemaInfo = ref(null);
const showFilm = ref(null);
const filmInfo = ref(null);
const filmdays = ref(null);
const scheduleList = ref(null);
const showFilmDetail = ref(true)

const route = useRoute()

const toCross = () => {
  showFilmDetail.value = true
}

const hasDone = computed(() => {
  if (cinemaInfo.value && showFilm.value && filmInfo.value && filmdays.value && scheduleList.value) {
    return true
  }
})

const cinemaId = computed(() => {
  return route.params.id;
})

onMounted(() => {
  fetchdata();
})

const hangdlerTags = () => {
  showFilmDetail.value = false
}

const Back = () => {
  console.log(route.params)
  history.back()
}

// 时间转换方法
const parTime = (time, type) => {
  return parseTimestamp(time, type)
}

// 当图片被点击
const hangClick = (item) => {
  filmInfo.value = item;
  filmdays.value = item.showDate.map((item) => {
    return {
      stamp: item,
      time: parseTimestamp(item, "M月D日")
    }
  })
  hangleFilmdays(item.showDate[0]);
}

const getActors = (act) => {
  return act.map((item) => item.name).join(" | ");
}

const getServes = () => {
  return cinemaInfo.value.services.map((item) => item.name);
}

// 点击了哪天
const hangleFilmdays = async (time) => {
  // 获取天的场次列表
  scheduleList.value = (
    await getscheduleList({
      filmId: filmInfo.value.filmId,
      cinemaId: cinemaInfo.value.cinemaId,
      date: time,
    })).data.schedules;
}

const fetchdata = async () => {
  // 请求影院数据
  cinemaInfo.value = (
    await getCinemaInfo({
      cinemaId: cinemaId.value,
    })
  ).data.cinema;

  // 请求具体影院推荐的电影数据
  const data = await getshowFilm({
    cinemaId: cinemaId.value,
  });

  // 初始化一些配置数据
  const Films = data.data.films;
  showFilm.value = Films;
  filmInfo.value = Films[0];
  filmdays.value = Films[0].showDate.map((item) => {
    return {
      stamp: item,
      time: parseTimestamp(item, "M月D日")
    }
  })

  // 获取第一天的场次列表
  hangleFilmdays(filmdays.value[0].stamp);

}

</script>

<style scoped>
.black {
  height: 25px;
}

.service-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  box-sizing: border-box;
}

.header-title {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.tags {
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #ffb232;
  overflow: hidden;
  position: relative;
  padding: 18px;
}

.ta,
.service {
  padding: 2px 5px;
  margin: 3px;
  color: #ffb232;
  border: 1px solid #ffb232;
  border-radius: 1px;
  font-size: 10px;
  text-align: center;
}

.address,
.addw {
  width: 374px;
  display: flex;
  align-items: center;
}

.goBack,
.gocross {
  width: 22px !important;
  position: absolute;
  padding: 10px;
}

.address {
  border-top: 1px solid #dedede;
  padding: 10px 0px;
  box-sizing: border-box;
}

.address img,
.telp img {
  width: 14px;
  height: 21px;
  margin-left: 10px;
}

.swiper-container {
  width: 100%;
  height: 130px;
  padding: 0 10px;
  box-sizing: border-box;
}

.addw span {
  max-width: 84%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px;
  font-size: 12px;
}

ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}

ul img {
  width: 90px;
  height: 130px;
  flex-shrink: 0;
  margin: 10px;
}

.catgo {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #797d82;
  font-size: 13px;
}

.info {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 15px 0;
}

.info service {
  width: 100px;
}

.info span {
  color: #797d82;
  width: 70%;
  font-size: 12px;
}

.film-info {
  height: 50px;
  width: 100%;
  background: #fff;
  padding: 15px 0;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  font-size: 15px;
}

.tabs-bar {
  height: 50px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  border-bottom: 1px solid #ededed;
  color: #191a1b;
}

.tabs-bar li {
  padding: 0px 15px;
  flex-shrink: 0;
  font-size: 12px;
  overflow: hidden;
}

.more {
  margin-left: 5px;
}

.schedule-item {
  height: 74px;
  padding: 8px 15px;
  position: relative;

  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #191a1b;
}

.buy-ticket {
  display: inline-block;
  border: 1px solid #ff5f16;
  border-radius: 4px;
  height: 25px;
  width: 50px;
  text-align: center;
  line-height: 24px;
  margin-left: 20px;
}

.little {
  font-size: 13px;
  color: #797d82;
  margin-top: 10px;
}
</style>
